Chrome 66 Beta：CSS 类型对象模型，异步剪贴板 API，AudioWorklet，等

原文链接：Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet

---

除非另有说明，否则下文所述的更改适用于 Android，Chrome OS，Linux，macOS 和 Windows 的最新 Chrome Beta 版本。在 ChromeStatus 上查看 Chrome 66 中完整的特性列表。

<canvas> 的 ImageBitmap 渲染上下文

从历史上看，将图像渲染到画布上首先要创建一个 <img> 标签，然后将其内容呈现到画布上。这会导致图像的多个副本存储在内存中。新的渲染上下文可以流线化 ImageBitmap 对象的显示，因而可以避免内存重复，并且更高效。

这个例子展示了如何使用 ImageBitmapRenderingContext。例子主要演示了关于图像像素的转移。这个例子是把像素从 blob 转移到 <canvas>，但像素也可以在 <canvas> 元素之间移动。请注意，blob 是压缩的，因此它不是内存中的完整副本。

const image = await createImageBitmap(imageBlob);
const canvas = document.createElement('canvas');
const context = canvas.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

canvas.toBlob((outputJPEGBlob) => {
  // Do something with outputJPEGBlob.
}, 'image/jpeg');

如果不使用 createImageBitmap()，那么 imageBlob 的解码会被延后(lazily decoded)，这会导致问题。另一方面，createImageBitmap() 是异步的，它可以让你在使用之前对它进行完整解码。例如，在 WebGL 游戏运行过程种，可以使用它来随时加载新的纹理。

CSS 类型对象模型

从历史上看，想要操纵 CSS 属性的开发人员必须只能操纵字符串，然后再将其转换为类型化表示。更糟的是，当开发人员试图读取 Javascrip 中 CSS 属性的值时，这种类型的值被转换为字符串。

在 Chrome 66 中，针对 CSS 属性的一个子集实现了 CSS 类型对象模型（OM）Level 1，这些属于 Houdini 的一部分。Type OM 通过将 CSS 值暴露为类型化的 JavaScript 对象而不是字符串来减轻开发人员和浏览器的负担。除了允许对赋值给 CSS 属性的值进行高效处理外，Typed OM 还允许开发人员编写更易于维护且易于理解的代码。

一个简单的例子说明了这一点。以前，如果我想设置元素的不透明度，我可以这样做：

el.style.opacity = 0.3;
el.style.opacity === "0.3"

使用 CSSOM：

el.attributeStyleMap.set("opacity", CSS.number("0.3"));
el.attributeStyleMap.get("opacity").value === 0.3

上面返回值的类型是 CSSUnitValue，比字符串更容易操作。

异步剪贴板 API

（译者(justjavac)注：Google 开发者中心有一篇文章介绍异步剪贴板 API Unblocking Clipboard Access，我也已经翻译了中文版 Async Clipboard API：异步剪贴板 API）

AudioWorklet

传统 ScriptProcessorNode 是异步的，而且需要线程跳跃(译者注：会在 UI 线程和用户线程之间跳跃)，这可能会产生不稳定的音频输出。AudioWorklet 对象提供了一个新的同步 JavaScript 执行上下文，它允许开发人员以编程方式控制音频，而不会在输出音频中产生额外延迟，更加稳定高效。

您可以在 Google Chrome Labs 查看示例代码以及其他示例代码。

除了 AudioWorklet 之外，其他 worklet API 正在构建中。PaintWorklet 在 Chrome 65 / Opera 52 中已经发布。AnimationWorklet 计划中。ScriptProcessorNode 会在 AudioWorklet 发布一段时间后会被弃用。

本发行版中的其他功能

Blink > Animation

The add and accumulate compositing operations are intended for building modularized animations. The add and accumulate keywords will be supported in Chrome soon. Until then, they will no longer throw errors. This is to maintain compatibility with Firefox and other implementations.

Blink > CSS

CSS 有 2 个新功能。

• CSS Values and Units Module Level 4 支持了数学表达式 calc(), min()，max()。
• rgb() 和 rgba() 函数中现在允许浮点值。

Blink > Feature Policy

默认情况下，deviceorientation，deviceorientationabsolute，和 devicemotion 事件仅限于顶级文档和相同来源的子框架，就如同 feature policy 对这些特性设置为 'self' 一样。要修改此行为，请明确 enable or disable the specific feature。

Blink > File API

尝试从无效或不存在的 BLOB URL 读取时 ，File API 会导致网络错误，而不是 404。

Blink > Forms

HTML 表单有 2 个新功能。

• 按照规范，<textarea> 和 <select> 支持 autocomplete 属性。
• 按照 HTML 规范的要求)，一个可变的复选框现在触发 3 个事件：click 事件，然后是 input 事件，然后是 change 事件。以前只有 click 和 change 事件被触发。

Blink > Fullscreen

如果全屏模式下的页面打开弹出窗口并调用 window.focus(), 该页面会退出全屏。如果弹出窗口以其他方式接收焦点，则不会发生这种情况。

Blink > GetUserMedia

MediaStreamTrack 接口有一个新方法 getCapabilities()。

返回一个 MediaTrackCapabilities 对象，该对象指定每个受限制属性的值或值范围。该功能因设备而异。

Blink > JavaScript

几个 JavaScript 更改。

• Function.prototype.toString() 函数现在返回源代码中写入的内容。这包括可能已经使用的空白和其他文本。例如，如果函数关键字和函数名称之间存在注释，则除了关键字和名称之外，现在还返回注释。
• JSON 现在是 ECMAScript 的一个语法子集，它允许字符串文本中的行分隔符(U+2028)和段落分隔符(U+2029)符号。
• try 语句的 catch 子句现在可以在没有参数的情况下使用。
• 除了之前早已实现的 String.prototype.trim() 外，Chrome 66 实现了 String.prototype.trimStart() 和 String.prototype.trimLeft() 用来将字符串两侧的空白去除。而 trimLeft() 和 trimRight() 是为了保持为向后兼容性而提供的非标准的方法别名。
• Array.prototype.values() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的值。

Blink > Layout

布局有 2 个新功能。

• grid 前缀：

  • grid-gap 变 gap
  • grid-row-gap 变 row-gap
  • grid-column-gap 变 column-gap
• 所有三者的默认值是 normal，前缀属性是新名称的别名。请注意，column-gap 属性已经存在并被 css-multicol 使用。
• 当元素的 display 属性是 table-row，table-row-group， table-header-group，table-footer-group，table-cell，table-caption，并具有 transform 属性时，此元素可以作为 fixed-position 元素的包含块。Blink 目前不能把 <tr>，<tbody>，<tfoot>，<thead> 作为 fixed-position 元素的包含块。

Blink > Media

媒体有 2 个新功能。

• 正如之前博客所介绍的那样，autoplay 只有当媒体不会播放声音时，用户主动点击后，或者（桌面版）如果用户以前在该网站上表现出对媒体的兴趣时才允许播放。这样做会在第一次打开网页时减少意外的视频播放和声音。

（译者(justjavac)注：目前运行被自动播放的内容包括：内容被静音、内容只包含视频（无音频）、用户在浏览会话期间点击网站上的某个地方、在移动设备上如果该网站已被用户添加到主屏幕、如果用户在桌面版浏览器上频繁播放该媒体）

• Media Capabilities, Decoding Info API 允许网站获取有关客户端的解码能力的更多信息。这为用户提供了更多关于媒体流的选择权，可以使客户端更加平滑高效地解码，而非仅仅基于可用带宽和屏幕大小分辨率进行解码。

Blink > Network

Fetch API 有 2 个新功能。

• Request 对象现在支持 keepalive 属性，该属性允许在关闭标签后继续 fetch。通过在构造函数的初始化对象中传递布尔值来调用此功能。它的值可以从对象本身读回。该属性也可以和 sendBeacon() 一起使用。
• 新的 AbortSignal 和 AbortController 接口允许取消 fetch 操作。创建一个 AbortController 对象并将其 signal 属性作为 option 传递给 fetch。调用 abortController.abort() 取消 fetch。 我们之前撰写的 abortable fetch article 中有更多信息，下面是一个代码示例。

const controller = new AbortController();
const signal = controller.signal;
const requestPromise = fetch(url, { signal });

// Abort the fetch:
controller.abort();

（题外话：cancelable-promises 提案在进入 stage 1 的时候被取消掉了）

Blink > ServiceWorker

ServiceWorker 有两个变化。

• 如果 request 的模式是 same-origin，而 response 的模式是 CORS，ServiceWorker 不能再响应。这是最近添加到 Fetch 规范的安全措施。
• FetchEvent.clientId 现在返回一个空字符串，而不是 null。例如，这会在导航请求期间发生。

Blink > WebRTC

Chrome 现在支持 RTCRtpSender.dtmf 属性。这取代了 CreateDTMFSender() 尚未弃用的功能。

弃用和互操作性改进

Blink > CSS

object-position 和 perspective-origin 属性不再接受 3 个部分组成的值，例如 top right 20%。此更改也适用于基本形状和渐变。有效位置值必须始终有 1, 2 或 4 个部分。

Blink > HTML

按照规范，ImageCapture.prototype.setOptions() 已被删除。

Blink > Input

按照规范，document.createTouch() 和 document.createTouchList() 已被删除。

Blink > Web Audio

在规范更改之后，AudioParam.prototype.value 的自动解压缩功能从 Chrome 中移除。如果您需要平滑处理 AudioParam 的更改，请使用 AudioParam.prorotype.setTargetAtTime()。